<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input
                class="new-todo"
                placeholder="What needs to be done?"
                autofocus
                @keydown.enter="addTodo"
            />
        </header>
        <!-- This section should be hidden by default and shown when there are todos -->
        <section class="main">
            <input 
                id="toggle-all" 
                class="toggle-all" 
                type="checkbox" 
                :checked="undownNum === 0 && todoList.length !== 0"
                @click="toggleAll"
            />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li
                    v-for="item in todoList"
                    :key="item.id"
                    :class="{
                        completed: item.is_checked,
                        editing: item.is_editing,
                    }"
                >
                    <div class="view">
                        <input
                            class="toggle"
                            type="checkbox"
                            v-model="item.is_checked"
                        />
                        <label @dblclick="allInp(item.id, 0)"> {{ item.text }} </label>
                        <button @click="delItem(item.id)" class="destroy"></button>
                    </div>
                    <input 
                        class="edit" 
                        :value="item.text" 
                        @keydown.enter="allInp(item.id, 1, $event)"
                        @keydown.esc="allInp(item.id, 2)"
                    />
                </li>

                <!-- <li class="completed">
						<div class="view">
							<input class="toggle" type="checkbox" checked>
							<label>Taste JavaScript</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>
					<li class="editing">
						<div class="view">
							<input class="toggle" type="checkbox" checked>
							<label>Taste JavaScript</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>
					<li>
						<div class="view">
							<input class="toggle" type="checkbox">
							<label>Buy a unicorn</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Rule the web">
					</li> -->
            </ul>
        </section>
        <!-- This footer should hidden by default and shown when there are todos -->
        <footer class="footer">
            <!-- This should be `0 items left` by default -->
            <span class="todo-count"><strong>{{ undownNum }}</strong> item left</span>
            <!-- Remove this if you don't implement routing -->
            <ul class="filters">
                <li>
                    <a 
                        :class="{ selected: isShow === 'all' }"
                        @click="isShow = 'all'" 
                        name="all" 
                        href="javascript:;"
                        >All</a
                    >
                </li>
                <li>
                    <a 
                        :class="isShow === 'active' ? 'selected' : ''"
                        @click="isShow = 'active'" 
                        name="active" 
                        href="javascript:;"
                        >Active</a
                    >
                </li>
                <li>
                    <a 
                        :class="{ selected: isShow === 'completed' }"
                        @click="isShow = 'completed'"
                        name="completed" 
                        href="javascript:;"
                        >Completed</a
                    >
                </li>
            </ul>
            <!-- Hidden if no completed items are left ↓ -->
            <button 
                v-show="undownNum !== todoList.length" class="clear-completed"
                @click="clearCompleted"
            >
                Clear completed
            </button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="javascript:;">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="javascript:;">you</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
    </footer>

    <!-- 删除确认弹框 -->
    <showmsg v-if="delFlag" @cancelBtn="cancelBtn" @okBtn="okBtn" />
</template>

<script>
import showmsg from "./components/showmsg.vue"
export default {
    data() {
        return {
            // 用于渲染页面和template连用
            todoList: [],
            // 我的全部数据, 在 JS 中 我们只操作 baseList
            baseList: [
                {
                    id: 1,
                    text: "吃饭",
                    is_checked: false,
                    is_editing: false,
                },
                {
                    id: 2,
                    text: "睡觉",
                    is_checked: false,
                    is_editing: false,
                },
                {
                    id: 3,
                    text: "打豆豆",
                    is_checked: false,
                    is_editing: false,
                },
            ],
            isShow: "all",
            delFlag: false,
            delId: -1
        };
    },
    methods: {
        //添加新的todo
        addTodo(e) {
            // console.log("键盘按下", e.target.value);
            this.todoList.push({
                id: this.todoList[this.todoList.length - 1].id + 1,
                text: e.target.value,
                is_checked: false,
                is_editing: false,
            });

            e.target.value = ''
        },
        //点击全选按钮
        toggleAll (e) {
            this.todoList.forEach(t => t.is_checked = e.target.checked)
        },
        // 双击文本进入编辑状态
        openInp(id) {
            const info = this.baseList.find((t) => t.id === id)
            info.is_checked = true
        },
        // 编辑框的ESC事件
        escInp(id) {
            const info = this.baseList.find((t) => t.id === id)
            info.is_editing = false
        },
        // 编辑框的enter事件
        enterInp(id, e) {
            const info = this.baseList.find((t) => t.id === id)
            info.text = e.target.value
            info.is_editing = false
        },
        // enter / esc / 双击事件(优化)
        allInp(id, type, e) {
            const info = this.baseList.find((t) => t.id === id)
            type === 1 && (info.text = e.target.value)
            info.is_editing = !type
        },
        // 删除弹框的取消按钮
        cancelBtn() {
            this.delFlag = false
        },
        // 删除弹框的确定按钮
        okBtn() {
            // 1. 清空已选中
            // this.baseList = this.baseList.filter(t => !t.is_checked)
            // 2. 删除某一项
            // this.baseList = this.baseList.filter(t => t.id !== this.delId)
            this.baseList =
                this.delId === -1
                ? this.baseList.filter((t) => !t.is_checked)
                : this.baseList.filter((t) => t.id !== this.delId)
            this.delId = -1
            this.cancelBtn()
        },
        // 删除某一项
        delItem(id) {
            this.delFlag = true
            this.delId = id
        },
        // 清空已选中
        clearCompleted() {
            this.delFlag = true
        }
    },
    computed: {
        undownNum () {
            // // 1. 寻找数组中有多少个未完成
            // const arr = this.todoList.filter(t  => !t.is_checked)
            // // 2. 返回未完成的数量
            // return arr.length

            return this.todoList.filter(t  => !t.is_checked).length
        },
        base_show() {
            // 当前计算属性中使用了 baseList 和 isShow, 这两个变量有一个发生变化, 都会影响 当前计算属性的值
            return {
                base: this.baseList,
                show: this.isShow,
            }
        }
    },
    watch: {
        base_show: {
            handler() {
                if(this.isShow === 'all') {
                    this.todoList = this.baseList
                }
                if(this.isShow === 'active') {
                    this.todoList = this.baseList.filter((t) => !t.is_checked)
                }
                if(this.isShow === 'completed') {
                    this.todoList = this.baseList.filter((t) => t.is_checked)
                }
            },
            immediate: true,
            deep: true
        }
    },
    components: {
        showmsg
    }
};
</script>

<style></style>
